import React, { useEffect, useState } from 'react'
import Child from './component/Child'
//子组件书写:
//1.子组件统一放在component文件夹中
//2.每个子组件有自己的css,js文件,这些文件统一放在以这个子组件名称命名的文件夹中
//3.父组件调用:只需要书写到路径,react会自己找index.jsx文件

export default function App() {
  let [opacity, setOpacity] = useState(1)
  useEffect(() => {
    const opacityTimer = setInterval(() => {
      opacity -= 0.1
      if (opacity <= 0) {
        opacity = 1
      }
      setOpacity(opacity)

      return () => {
        clearInterval(opacityTimer)
      }
    }, 100)

  }

    , [])

  return (
    <div>
      <h1 style={{ opacity }}>有花堪折直须折,莫待无花空折枝</h1>
      <Child/>
    </div>
  )
}
